<template>
	<div class="h100" style="overflow-x:hidden;">
		<div class="search-box">
			<form action="/">
				<van-search v-model="videoName" placeholder="请输入关键字" :show-action="true" shape="round" @search="onSearch">
					<div slot="action" @click="onCancel">取消</div>
				</van-search>
			</form>
		</div>
		<div class="container">
			<div class="search-menu">
				<div class="search-menu-header flex align-items justify-b">
					<div class="search-menu-header-l">
						历史搜索
					</div>
					<i class="iconfont iconshanchu" @click="clearHistory"></i>
				</div>
				<div class="search-menu-lists">
					<span class="seach-item inline ellipsis" v-for="item in history" @click="searchBtnFun(item)">
						{{item}}
					</span>
				</div>
			</div>
			<div class="seach-list">
				<van-list :immediate-check="false" v-model="tab.loading" :finished="tab.finished" finished-text="没有更多了" @load="scrollEvent">
					<v-item v-for="item in tab.dataList" v-if="tab.dataList.length" :videoItem="item"/>
					</v-item>
				</van-list>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getVideoList,
	} from '@/api/permission'
	import {
		Search
	} from 'vant';
	import vItem from '@/components/item.vue'
	import Cookies from 'js-cookie';
	import {
		List,
		Cell
	} from 'vant'
	export default {
		components: {
			[Search.name]: Search,
			[List.name]: List,
			vItem
		},
		data() {
			return {
				videoName: null,
				history: [],
				tab: {
					dataList: [],
					loading: false,
					finished: false,
					pending: false,
					page: {
						num: 0,
						size: 10,
						total: null
					}
				}
			}
		},
		methods: {
			scrollEvent() {
				let self = this
				let tablist = self.tab
				let page = tablist.page
				if (!tablist.pending && tablist.dataList.length) {
					if ((page.num + 1) == page.total) {
						tablist[`finished`] = true
						tablist[`loading`] = false
						tablist[`pending`] = false
					} else {
						tablist.page.num++
						tablist[`pending`] = true
						self.getVideoListFun()
					}
				}
			},
			onSearch() {
				let self = this
				self.history.push(self.videoName)
				self.getVideoListFun()
			},
			searchBtnFun(value) {
				let self = this
				self.videoName = value
				self.tab = {
					dataList: [],
					loading: false,
					finished: false,
					pending: false,
					page: {
						num: 0,
						size: 10,
						total: null
					}
				}
				self.getVideoListFun()
			},
			onCancel() {
				this.videoName = ''
			},
			clearHistory() {
				let self = this
				self.history = []
				Cookies.set('xshitory', '')
			},
			getVideoListFun() {
				let self = this
				let tablist = self.tab
				let page = tablist.page
				getVideoList({
					index: page.num, // 页码
					size: page.size, // 每页长度
					videoName: self.videoName
				}).then((response) => {
					// 请求的列表数据
					let arr = response.content
					// // 如果是第一页需手动置空列表
					if (page.num === 0) tablist.dataList = []
					// // 把请求到的数据添加到列表
					tablist.dataList = tablist.dataList.concat(arr)
					tablist.loading = false
					tablist.pending = false
					if (page.num == response.totalPages) {
						tablist.finished = true
					}
					tablist.page = {
						num: response.currentPage,
						total: response.totalPages,
						size: page.size
					}
					self.first = false
				}).catch(() => {

				})
			},
		},
		mounted() {
			let self = this
			if (Cookies.get('xshitory')) {
				self.history = Cookies.get('xshitory').split(',')
			}
		},
		destroyed() {
			let self = this
			if (self.history.length) {
				Cookies.set('xshitory', self.history.join(','))
			}
		}
	}
</script>

<style lang="less" scoped>
	.search-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;

		* {
			box-sizing: border-box;
		}
	}

	.search-menu {
		padding: 15.5px 18px;
		border-bottom: 1px solid #EEEEEE;

		&-header {
			margin-bottom: 22px;

			&-l {
				color: #444444FF;
				line-height: 23px;
				font-size: 16px;
			}
		}

		.seach-item {
			height: 33px;
			line-height: 21px;
			font-size: 15px;
			font-weight: 500;
			color: #666666FF;
			background: rgba(243, 244, 248, 1);
			border-radius: 17px;
			margin-right: 10px;
			padding: 4.5px 18px 4.5px 17px;
			margin-bottom: 15px;
			max-width: 166px;
			box-sizing: border-box;
		}
	}

	.container {
		background-color: #ffff;
		height: 100%;
		padding-top: 54px;
	}
</style>
